import { Table, Col, Row, DatePicker,Button,Tag  } from 'antd';

const { Column, ColumnGroup } = Table;
import React, { useState} from 'react';
import styles from './style.less'
import { SearchOutlined,LineChartOutlined,FileTextOutlined} from '@ant-design/icons';
import SelectArea from '../../energyAnalysis/components/selectArea';
const MaximumReport: React.FC = () => {

  



function onChange(date, dateString) {
  console.log(date, dateString);
}
const data = [
  {
    lineName: 'B栋宿舍配电箱',
    maximumDemand1: '--',
    time1:  '--',
    maximumDemand2: '--',
    time2:  '--',
    maximumDemand3: '--',
    tim3:  '--',
    maximumDemand4: 66550.0,
    time4: 20210909
  },  {
    lineName: 'A栋宿舍配电箱',
    maximumDemand1: '--',
    time1:  '--',
    maximumDemand2: '--',
    time2:  '--',
    maximumDemand3: '--',
    tim3:  '--',
    maximumDemand4: 66550.0,
    time4: 20210909
  }
];

function tagRender(props) {
  const { label, value, closable, onClose } = props;
  const onPreventMouseDown = event => {
    event.preventDefault();
    event.stopPropagation();
  };
  return (
    <Tag
      color={value}
      onMouseDown={onPreventMouseDown}
      closable={closable}
      onClose={onClose}
      style={{ marginRight: 3 }}
    >
      {label}
    </Tag>
  );
}

    return (
      <>
        <Row        style={{ margin: '-16px 0 '}} > 
          <Col xl={5} lg={5} md={6} sm={6} xs={6} style={{  padding: '24px 12px', borderRight: '1px solid #355fb8' }}>
            <SelectArea/>
          </Col>
          <Col xl={19} lg={19} md={18} sm={18} xs={18} style={{ padding: 22 }} className={styles.servuychart}>

            <Row> 
              <div  className={styles.inputBg} >
                    <DatePicker  popupStyle={{ background: 'rgb(20, 49, 115)'}}    bordered={false} onChange={onChange} />
                  </div>
                <Button className={styles.exportBtnBg} style={{marginRight:12}} type="primary" ><SearchOutlined /> 查询 </Button>
            </Row>
         <Row   > 
         <Table   style={{ marginTop: '24px'}} className={styles.tableborder}  bordered  pagination={false} dataSource={data}> 
            <Column title="线路名称" dataIndex="lineName" key="lineName" />
            <ColumnGroup title="1月">
              <Column title="最大需量" dataIndex="maximumDemand1" key="maximumDemand1" />
              <Column title="时间" dataIndex="time1" key="time1" />
            </ColumnGroup>
            <ColumnGroup title="2月">
              <Column title="最大需量" dataIndex="maximumDemand1" key="maximumDemand1" />
              <Column title="时间" dataIndex="time1" key="time1" />
            </ColumnGroup>
            <ColumnGroup title="3月">
              <Column title="最大需量" dataIndex="maximumDemand1" key="maximumDemand1" />
              <Column title="时间" dataIndex="time1" key="time1" />
            </ColumnGroup>
            <ColumnGroup title="4月">
              <Column title="最大需量" dataIndex="maximumDemand4" key="maximumDemand4" />
              <Column title="时间" dataIndex="time4" key="time4" />
            </ColumnGroup>
            <ColumnGroup title="5月">
              <Column title="最大需量" dataIndex="maximumDemand4" key="maximumDemand4" />
              <Column title="时间" dataIndex="time4" key="time4" />
            </ColumnGroup>
            <ColumnGroup title="6月">
              <Column title="最大需量" dataIndex="maximumDemand4" key="maximumDemand4" />
              <Column title="时间" dataIndex="time4" key="time4" />
            </ColumnGroup>
            <ColumnGroup title="7月">
              <Column title="最大需量" dataIndex="maximumDemand4" key="maximumDemand4" />
              <Column title="时间" dataIndex="time4" key="time4" />
            </ColumnGroup>
          </Table>
          </Row   > 
          </Col>
        </Row>
      
  </>
    );
};

export default MaximumReport;